<template>
  <div id="app">
    <div class="speech-wrapper">
      <a-form v-model="queryParams" label-width="90px" label-position="left" class="formStyle">
        <a-form-item label="文字:">
          <a-input v-model="queryParams.text" type="textarea" placeholder="想听啥？"></a-input>
        </a-form-item>

        <a-form-item label="选择语言:">
          <a-select v-model="queryParams.lang" @change="onChange">
            <a-select-option v-for="(item, index) in vioceLanguage" :key="index" :value="item">{{
              item
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="选择声音:">
          <a-select v-model="queryParams.voiceURI" :disabled="voiceURL.length == 0">
            <a-select-option v-for="(item, index) in voiceURL" :key="index" :value="item.voiceURI">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <!-- <a-form-item label="声音:">
          <span>{{ queryParams.voiceURI }}</span>
        </a-form-item> -->

        <a-form-item label="音量:">
          <a-slider v-model="queryParams.volume" :min="0" :max="1" :step="0.1" show-input></a-slider>
        </a-form-item>

        <a-form-item label="语速:">
          <a-slider v-model="queryParams.rate" :min="0" :max="10" :step="1" show-input></a-slider>
        </a-form-item>

        <a-form-item label="音调:">
          <a-slider v-model="queryParams.pitch" :min="0" :max="2" :step="0.2" show-input></a-slider>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="onSpeak">朗读</a-button>
          <a-button type="primary" @click="onCancel" style="margin-left: 10px">停止</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      voiceData: [],
      vioceLanguage: [],
      voiceURL: [],
      queryParams: {
        voiceURI: 'Ting-Ting',
        lang: 'zh-CN',
        volume: 1,
        pitch: 0.8,
        rate: 1,
        text: `'轻轻的我走了，','正如我轻轻的来；','我轻轻的招手，','作别西天的云彩。','那河畔的金柳，','是夕阳中的新娘；','波光里的艳影，','在我的心头荡漾。','软泥上的青荇，','油油的在水底招摇；','在康河的柔波里，','我甘心做一条水草！','那榆荫下的一潭，','不是清泉，','是天上虹；','揉碎在浮藻间，','沉淀着彩虹似的梦。','寻梦？撑一支长篙，','向青草更青处漫溯；','满载一船星辉，','在星辉斑斓里放歌。','但我不能放歌，','悄悄是别离的笙箫；','夏虫也为我沉默，','沉默是今晚的康桥！','悄悄的我走了，','正如我悄悄的来；','我挥一挥衣袖，','不带走一片云彩。',`,
      },
      speechInstance: null,
    }
  },
  mounted() {
    let timer = setInterval(() => {
      if (!this.voiceData.length) {
        //获取语言包
        this.voiceData = typeof speechSynthesis !== 'undefined' && speechSynthesis.getVoices()
        const langSet = new Set(this.voiceData.map((item) => item.lang))
        const setArray = Array.from(langSet)
        this.vioceLanguage = setArray
        this.onChange('zh-CN')
      } else {
        clearInterval(timer)
      }
    }, 500)
  },
  methods: {
    onChange(e) {
      const voiceURL = this.voiceData.filter((item) => {
        return item.lang == e
      })
      this.voiceURL = voiceURL
      this.queryParams.voiceURI = voiceURL[0].voiceURI
    },

    onSpeak() {
      this.speechInstance = new SpeechSynthesisUtterance()
      Object.keys(this.queryParams).forEach((key) => {
        this.speechInstance[key] = this.queryParams[key]
      })
      console.log(this.speechInstance)

      typeof speechSynthesis !== 'undefined' && speechSynthesis.speak(this.speechInstance)
    },

    onCancel() {
      if (speechSynthesis.speaking || speechSynthesis.pending) {
        speechSynthesis.cancel()
      }
    },
  },
}
</script>
